<!-- <div class="row"  style="margin-top: -5px;">
	<div class="col-md-3 col-md-offset-9">
		 <div id="tip" style="display: none;position: absolute;top:-5px;z-index: 9999;width:100%;text-align:center;"></div> 
	</div>	
</div> -->
<head>
<meta charset="utf-8" />
<title>stu</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta
	content="A fully featured admin theme which can be used to build CRM, CMS, etc."
	name="description" />
<meta content="Coderthemes" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style type="text/css">
</style>
</head>
<body>
	<DIV class="row" style="margin-top: -40px;">
		<DIV class="col-md-6 col-md-offset-3">
			<div class="form-group">
				<h1>案例港区</h1>
				<select class="form-control" id="port_id" onchange="showPort()">
					<option value="0">---请选择港区---</option>
					<div th:each="port:${list1}">
						<option th:value="${port.id}" th:selected="${port_id==port.id}">
							<span th:text="${port.name}"></span></option>
					</div>
				</select>
			</div>
		</DIV>
	</DIV>
	<DIV class="row" id="extended-port-info" style="margin-top: -30px;">
		<DIV class="col-md-12" id="content" style="margin-top: -15px;">
			<div style="float: left; width: 100%; height: 50px">
				<UL class="nav nav-tabs horizontal" role="tablist">
					<LI class="active" role="presentation"><A role="tab"
						aria-controls="tab1" href="#tab1"
						onClick="javascript:checkPort();" data-toggle="tab">港口规模及设计船型</A></LI>
					<LI role="presentation"><A role="tab" aria-controls="tab2"
						href="#tab2" onClick="javascript:checkPort();" data-toggle="tab">气/海象及地质等</A></LI>
					<LI role="presentation"><A role="tab" aria-controls="tab3"
						href="#tab3" onClick="javascript:checkPort();" data-toggle="tab">乘潮水位累积频率曲线</A></LI>
					<LI role="presentation"><A role="tab" aria-controls="tab4"
						href="#tab4" onClick="javascript:checkPort();" data-toggle="tab">手工仿真</A></LI>
					<LI role="presentation"><A role="tab" aria-controls="tab5"
						href="#tab5" onClick="javascript:checkPort();" data-toggle="tab">航道主尺寸</A></LI>
					<LI role="presentation"><A role="tab" aria-controls="tab6"
						href="#tab6" onClick="javascript:next();" data-toggle="tab">航道仿真实验</A></LI>
					<LI role="presentation"><A role="tab" aria-controls="tab6"
						href="#tab7" data-toggle="tab">实验报告上传</A></LI>
				</UL>
			</div>
			<div
				style="float: left; width: 20%; height: 40px; margin-left: -20%;">
				<div id="tip"
					style="display: none; z-index: 9999; width: 100%; text-align: center; padding: 10px; margin-bottom: 2px;"></div>
			</div>

			<DIV class="tab-content">
				<!-- 第1个Tab -->
				<DIV class="tab-pane active" id="tab1" role="tabpanel">
					<DIV class="ActiveTab-wrapper" id="portdetailsinport_DynTable">
						<DIV class="row">
							<DIV class="col-md-12">
								<DIV class="dataTables_wrapper&#10;"
									id="datatable_vessels_in_port_table">

									<!-- 	<div><h2>港口规模</h2></div> -->
									<DIV class="table-responsive">
										<TABLE class="table dataTable" id="tab11_table"
											cellspacing="0" width="100%">
											<THEAD>
												<TR>
													<TH>泊位吨级DWT(吨)</TH>
													<TH>货种</TH>
													<TH>数量</TH>
													<TH>备注</TH>
												</TR>
											</THEAD>
											<TBODY id="tbody11">
											</TBODY>
										</TABLE>
									</DIV>
									<div>
										<h2>设计船型主要参数</h2>
									</div>
									<DIV class="table-responsive">
										<TABLE class="table dataTable" id="tab12_table"
											cellspacing="0" width="100%">
											<THEAD>
												<TR>
													<TH>泊位吨级DWT(吨)</TH>
													<TH>船种</TH>
													<TH>总长(m)</TH>
													<TH>型宽(m)</TH>
													<TH>型深(m)</TH>
													<TH>满载吃水(m)</TH>
													<TH>单船装载量</TH>
													<TH>船时效率</TH>
												</TR>
											</THEAD>
											<!-- 	显示大连港的所有港口数据 -->
											<TBODY id="tbody12">
											</TBODY>
										</TABLE>
									</DIV>
									<div>
										<h2>港区平面布置图</h2>
										<IMG id="portImg" src="images/cn.svg" width="100%" />
									</div>
								</DIV>
							</DIV>
						</DIV>
					</DIV>

					<SCRIPT th:inline="javascript">
							//tip是提示信息，type:'success'是成功信息，'danger'是失败信息,'info'是普通信息,'warning'是警告信息
							function showTip(tip, type) {
							    var $tip = $('#tip');
							    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).fadeIn(500).delay(1000).fadeOut(500);
							}
							
							function showLoading()
							{
								var $tip = $('#tip');
							    $tip.prop('class', 'alert alert-info').text("正在计算，请耐心等待……").fadeIn(500);
							}
						
							function hideLoading()
							{
								var $tip = $('#tip');
								$tip.fadeOut(500);
							}
							function showPortImg(port_id)
							{
								var ports=[[${list1}]];	
								 /* <![CDATA[ */
							     for(var i=0;i<ports.length;i++)
								{
							    	if(ports[i].id==port_id)
							    		{
							    		$('#portImg').attr("src","images/teach/"+ports[i].portFile);
							    		$('#geoImg').attr("src","images/teach/"+ports[i].geoFile);
							    		}
								}
							 /* ]]> */
							}
							function checkPort()
							{
								 var port_id=$("#port_id").find("option:selected").val();  //获取portid
								 if(port_id=='0')
								 {
									 //showAlert("请选择港口规模");
									 showTip("请选择港口规模","danger");
								 return;
								 }
							}
							
				function showPort()
				{
					 var port_id=$("#port_id").find("option:selected").val();  //获取portid
					 var port_content=$("#port_id").find("option:selected").text()+"乘潮潮位累积频率曲线";  //获取内容
					 $("#tidename").text(port_content);
					 if(port_id=='0')
						 {
						 showTip("请选择港口规模","danger");
						 return;
						 }
					 showPortImg(port_id);	//显示第一个和第二个tab中的图片
					 showPortDetail(port_id);//显示第二个tab中的表格数据
					 showManualSimulationDetail(port_id);//显示第四个tab中的表格数据
					 $.ajax({
				            url:"getBerthsByPort.json",
				            type: "POST",
				            data:{"port_id":port_id},
				            success: function(data) {
				            $('#tbody11').empty();
				               /* <![CDATA[ */
				            	   //显示第一个tab中的第一个表格
							     for(var i=0;i<data.list11.length;i++)
								{
							    	var tds="";								
							    	tds+="<TD>"+data.list11[i].tonnage+"</TD>";
							    	tds+="<TD>"+data.list11[i].cargoType.cargoType+"</TD>";
									tds+="<TD>"+data.list11[i].number+"</TD>";								
									tds+="<TD>"+data.list11[i].tonnage+"</TD>";								
							    	$('#tbody11').append("<TR>"+tds+"</TR>");	
								}
							 /* ]]> */
							   
				             }
				         });
					 $.ajax({
				            url:"getShipsByPort.json",
				            type: "POST",
				            data:{"port_id":port_id},
				            success: function(data) { 
				            var cargoTypeId=1;
				            $('#tbody12').empty();
				               /* <![CDATA[ */
				            	   //显示第一个tab中的第二个表格
							      for(var i=0;i<data.list12.length;i++)
								{
							    	cargoTypeId=data.list12[i].cargoTypeID;
							    	var tds="";								
							    	tds+="<TD>"+data.list12[i].tonnageDWT+"</TD>";
							    	tds+="<TD>"+data.list12[i].cargoType.cargoType+"</TD>";
									tds+="<TD>"+data.list12[i].l+"</TD>";								
									tds+="<TD>"+data.list12[i].b+"</TD>";								
									tds+="<TD>"+data.list12[i].h+"</TD>";								
									tds+="<TD>"+data.list12[i].t+"</TD>";								
									tds+="<TD>"+data.list12[i].ave_cps+"</TD>";								
									tds+="<TD>"+data.list12[i].avr_he+"</TD>";																
							    	$('#tbody12').append("<TR>"+tds+"</TR>");	
								} 
							 /* ]]> */
							    
							      $.ajax({
							            url:"getTidesByCargotype.json",
							            type: "POST",
							            data:{"cargoTypeId":cargoTypeId},
							            success: function(data) { 
							            $('#tbody3').empty();
							               /* <![CDATA[ */
							            	   //显示第三个tab中的表格数据
										      for(var i=0;i<data.list3.length;i++)
											{
										    	var tds="";								
										    	tds+="<TD>"+data.list3[i].ts+"</TD>";
										    	tds+="<TD>"+data.list3[i].f1+"</TD>";
										    	tds+="<TD>"+data.list3[i].f5+"</TD>";
										    	tds+="<TD>"+data.list3[i].f10+"</TD>";
										    	tds+="<TD>"+data.list3[i].f15+"</TD>";
										    	tds+="<TD>"+data.list3[i].f20+"</TD>";
										    	tds+="<TD>"+data.list3[i].f25+"</TD>";
										    	tds+="<TD>"+data.list3[i].f30+"</TD>";
										    	tds+="<TD>"+data.list3[i].f35+"</TD>";
										    	tds+="<TD>"+data.list3[i].f40+"</TD>";
										    	tds+="<TD>"+data.list3[i].f45+"</TD>";
										    	tds+="<TD>"+data.list3[i].f50+"</TD>";
										    	tds+="<TD>"+data.list3[i].f55+"</TD>";
										    	tds+="<TD>"+data.list3[i].f60+"</TD>";
										    	tds+="<TD>"+data.list3[i].f65+"</TD>";
										    	tds+="<TD>"+data.list3[i].f70+"</TD>";
										    	tds+="<TD>"+data.list3[i].f75+"</TD>";
										    	tds+="<TD>"+data.list3[i].f80+"</TD>";
										    	tds+="<TD>"+data.list3[i].f85+"</TD>";
										    	tds+="<TD>"+data.list3[i].f90+"</TD>";
										    	tds+="<TD>"+data.list3[i].f95+"</TD>";
										    	tds+="<TD>"+data.list3[i].f98+"</TD>";
																											
										    	$('#tbody3').append("<TR class='vesselstatus_unknown live_1'>"+tds+"</TR>");	
											} 
										      showChart(data.list3);
										 /* ]]> */
							             }
							         }); 
				             }
				         }); 
					
				}
	</SCRIPT>
				</DIV>
				<!-- 第2个Tab -->
				<DIV class="tab-pane" id="tab2" role="tabpanel">
					<DIV class="ActiveTab-wrapper" id="portdetailsinport_DynTable">
						<DIV class="row">
							<DIV class="col-md-12">
								<DIV class="dataTables_wrapper&#10;"
									id="datatable_vessels_in_port_table">
									<div>
										<h2>海象、气象条件</h2>
									</div>
									<DIV class="table-responsive">
										<TABLE class="table dataTable" id="tab2_table">
											<THEAD>
												<TR>
													<TH>项目</TH>
													<TH>属性</TH>
													<TH>值</TH>

												</TR>
											</THEAD>
											<TBODY id="tbody2">
											</TBODY>
										</TABLE>
									</DIV>
									<div>
										<h2>地形、水深及地质条件</h2>
										<IMG id="geoImg" src="images/cn.svg" width="100%" />
									</div>
								</DIV>
							</DIV>
						</DIV>
					</DIV>
					<SCRIPT th:inline="javascript">
	             function showPortDetail(port_id)
 				{
	            	 $('#tbody2').empty();
	            	 var ports=[[${list1}]];	
					 /* <![CDATA[ */
				     for(var i=0;i<ports.length;i++)
					{
				    	if(ports[i].id==port_id)
				    		{			    		
						    	var trs="";								
						    	trs+="<TR><td>港口作业天数（天）</td><td></td><td>"+ports[i].operationalDay+"</td></TR>";
						    	trs+="<TR><td rowspan='7'>潮汐</td><td>潮汐类型</td><td>正规半日潮</td></TR>";
						    	trs+="<TR><td>设计高水位（m）</td><td>"+ports[i].desHWL+"</td></TR>";
						    	trs+="<TR><td>设计低水位（m）</td><td>"+ports[i].desLWL+"</td></TR>";						    	
						    	trs+="<TR><td>极端高水位（m）</td><td>"+ports[i].extHWL+"</td></TR>";
						    	trs+="<TR><td>极端低水位（m）</td><td>"+ports[i].extLWL+"</td></TR>";
						    	trs+="<TR><td>平均潮差（m）</td><td>"+ports[i].tideRange+"</td></TR>";
						    	trs+="<TR><td>平均潮位（m）</td><td>"+ports[i].averageWL+"</td></TR>";
						    	trs+="<TR><td rowspan='2'>波浪</td><td>波高H4%（m）</td><td>"+ports[i].waveHeight+"</td></TR>";
						    	trs+="<TR><td>周期（s）</td><td>"+ports[i].wavePeriod+"</td></TR>";
						    	trs+="<TR><td rowspan='2'>海流</td><td>流速（m/s）</td><td>"+ports[i].crossCurrentV+"</td></TR>";
						    	trs+="<TR><td>流向角（度）</td><td>"+ports[i].longitudinalCurrentV+"</td></TR>";
						    	
						    	$('#tbody2').append(trs);	
				    		}
					}
				 /* ]]> */
 				}
			    </SCRIPT>
				</DIV>
				<!-- 第3个Tab -->
				<DIV class="tab-pane " id="tab3" role="tabpanel">
					<DIV class="ActiveTab-wrapper" id="tab3_chart">
						<h2 id="tidename"></h2>
						<div id="box" style="height: 400px; width: 1150px; padding: 20px"></div>
						<script type="text/javascript"
							src="/plugins/echarts/echarts.min.js"></script>
						<SCRIPT th:inline="javascript">
				    // 获取到这个DOM节点，然后初始化
				 /* <![CDATA[ */
					 function showChart(tides){
				    var myChart = echarts.init(document.getElementById("box"));
				    var sdata=getOptionsData(tides);
				    var option = {
				        // 标题
				        title: {
				            text: '乘潮潮位累积频率曲线',
				            subtext: '数据来源：大连理工大学'
				        },
				        tooltip: {
				            trigger: 'axis'
				        },
				        //图例名
				        legend: {
				            data:['ts=1.0','ts=2.0','ts=3.0','ts=4.0','ts=5.0','ts=6.0','ts=7.0','ts=8.0']
				        },
				        grid: {
				            left: '3%',   //图表距边框的距离
				            right: '4%',
				            bottom: '3%',
				            containLabel: true
				        },
				        //工具框，可以选择
				        toolbox: {
				            feature: {
				                saveAsImage: {}
				            }
				        },
				        //x轴信息样式
				        xAxis: {
				            type: 'category',
				            boundaryGap: false,
				            data: ['1','5','10','15','20','25','30','35','40','45','50','55','60','65','70','75','80','85','90','95','98'],
				            //坐标轴颜色
				            axisLine:{
				                lineStyle:{
				                    color:'black'
				                }
				            },
				            //x轴文字旋转
				            axisLabel:{
				                rotate:30,
				                interval:0
				            },
				        },

				        yAxis : [
				            {
				                type : 'value',
				                axisLabel : {
				                    formatter: '{value}'
				                }
				            }
				        ],
				        series: sdata
				    };
				    myChart.setOption(option, true);
				 }
				 function getOptionsData(tides)
				{
			    	var data=[];               
                    for(var i=1;i<=8;i++){
                	var map={};
                    map["name"]='ts='+i+'.0';
                    map["type"]='line';
                    map["stack"]='总量';                           
                	 var array=[];
                   	array.push(tides[i-1].f1);
                   	array.push(tides[i-1].f5);
                   	array.push(tides[i-1].f10);
                   	array.push(tides[i-1].f15);
                   	array.push(tides[i-1].f20);
                   	array.push(tides[i-1].f25);
                 	array.push(tides[i-1].f30);
                   	array.push(tides[i-1].f35);
                 	array.push(tides[i-1].f40);
                   	array.push(tides[i-1].f45);
                 	array.push(tides[i-1].f50);
                   	array.push(tides[i-1].f55);
                 	array.push(tides[i-1].f60);
                   	array.push(tides[i-1].f65);
                 	array.push(tides[i-1].f70);
                   	array.push(tides[i-1].f75);
                 	array.push(tides[i-1].f80);
                 	array.push(tides[i-1].f85);
                   	array.push(tides[i-1].f90);
                   	array.push(tides[i-1].f95);
                   	array.push(tides[i-1].f98);
                     map["data"]=array;
                     data.push(map);
                	}
                 return data;		    		
				}
				    /* ]]> */	
			    </SCRIPT>
						<DIV class="row">
							<DIV class="col-md-12">

								<DIV class="dataTables_wrapper&#10;">
									<DIV class="table-responsive">
										<TABLE class="table dataTable" id="tab3_table">
											<THEAD>
												<TR>
													<!-- <TH title="" class="vesselflag">ID</TH> -->
													<TH>积累频率（%）</TH>
													<TH>1</TH>
													<TH>5</TH>
													<TH>10</TH>
													<TH>15</TH>
													<TH>20</TH>
													<TH>25</TH>
													<TH>30</TH>
													<TH>35</TH>
													<TH>40</TH>
													<TH>45</TH>
													<TH>50</TH>
													<TH>55</TH>
													<TH>60</TH>
													<TH>65</TH>
													<TH>70</TH>
													<TH>75</TH>
													<TH>80</TH>
													<TH>85</TH>
													<TH>90</TH>
													<TH>95</TH>
													<TH>98</TH>
												</TR>
											</THEAD>

											<TBODY id="tbody3">
											</TBODY>
										</TABLE>
									</DIV>
								</DIV>
							</DIV>
						</DIV>
					</DIV>
				</DIV>


				<!-- 第4个Tab -->
				<DIV class="tab-pane " id="tab4" role="tabpanel">
					<DIV class="ActiveTab-wrapper" id="portdetailsinport_DynTable">
						<DIV class="row">
							<DIV class="col-md-12">
								<DIV class="dataTables_wrapper&#10;">
									<div>
										<h2>单向航道，满足最大船型全天侯进出港；</h2>
									</div>
									<div>
										<h2>船舶到港间隔时间</h2>
									</div>
									<DIV class="table-responsive">
										<TABLE class="table dataTable" id="tab4_table">
											<THEAD>
												<TR>
													<TH>序号</TH>
													<TH>吨级DWT(t)</TH>
													<TH>船种</TH>
													<TH>间隔时间(h)</TH>
													<TH>占用泊位时间(h)</TH>
												</TR>
											</THEAD>
											<TBODY id="tbody4"></TBODY>
										</TABLE>
									</DIV>
								</DIV>
							</DIV>
						</DIV>
					</DIV>
					<SCRIPT th:inline="javascript">
				 function showManualSimulationDetail(port_id)
	 				{
					 $.ajax({
				            url:"getSimulationDataByPort.json",
				            type: "POST",
				            data:{"port_id":port_id},
				            success: function(data) {
				            	console.log(data);
				            $('#tbody4').empty();
				               /* <![CDATA[ */
							     for(var i=0;i<data.list4.length;i++)
								{
							    	 var tds="";								
								    tds+="<TD>"+data.list4[i].id+"</TD>";
								    tds+="<TD>"+data.list4[i].tonnageDWT+"</TD>";
								    tds+="<TD>"+data.list4[i].cargoType.cargoType+"</TD>";
								    tds+="<TD>"+data.list4[i].interval+"</TD>";
								    tds+="<TD>"+data.list4[i].berth_service_time+"</TD>";																									
								    $('#tbody4').append("<TR class='vesselstatus_unknown live_1'>"+tds+"</TR>");		
								}
							 /* ]]> */
							   
				             }
				         });
	 				}
			    </SCRIPT>
				</DIV>


				<!-- 第5个Tab -->

				<DIV class="tab-pane " id="tab5" role="tabpanel">
					<DIV class="ActiveTab-wrapper" id="next1">
						<DIV class="row">
							<!-- <div><h2>航道主尺度</h2></div> -->
							<form id="form1">
								<DIV class="row">
									<DIV class="col-md-8 col-md-offset-2">
										<DIV class="dataTables_wrapper&#10;">
											<DIV class="table-responsive">
												<TABLE class="table dataTable" id="tab5_table">
													<TBODY>
														<tr>
															<td colspan="3" style="text-align: center;"><img
																src="images/teach/ec.jpg" width="80%" /></td>
														</tr>
														<tr>
															<td rowspan="4">航道有效宽度</td>
															<td>航道线数</td>
															<td><select class="form-control" id="issdec"
																name="issdec">
																	<option value="1" selected="selected">单线</option>
																	<option value="2">双线</option>
															</select></td>
														</tr>
														<tr>
															<td>航道漂移倍数n</td>
															<td><select class="form-control" id="multi"
																name="multi">
																	<option value="1.81">1.81</option>
																	<option value="1.69" selected="selected">1.69</option>
																	<option value="1.59">1.59</option>
																	<option value="1.45">1.45</option>
															</select></td>
														</tr>
														<tr>
															<td>风、流压偏角r(度)</td>
															<td><select class="form-control" id="wangle"
																name="wangle">
																	<option value="3">3</option>
																	<option value="7" selected="selected">7</option>
																	<option value="10">10</option>
																	<option value="14">14</option>
															</select></td>
														</tr>
														<tr>
															<td>船舶与航道底边间富裕宽度c（m）</td>
															<td><select class="form-control" id="widc"
																name="widc">
																	<option value="0.50B">0.50B</option>
																	<option value="0.75B">0.75B</option>
																	<option value="B" selected="selected">B</option>
																	<option value="1.50B">1.50B</option>
															</select></td>
														</tr>
														<tr>
															<td rowspan="7">通航/设计水深</td>
															<td>船舶航行下沉量Z0(m)</td>
															<td><input type="number" id="heiz0" name="heiz0"
																required="required" value="0.54"></input></td>
														</tr>
														<tr>
															<td>航道海底土质类别</td>
															<td><select class="form-control" id="soil"
																name="soil">
																	<option value="1" selected="selected">淤泥土、软塑、可塑性土、松散砂土</option>
																	<option value="2">硬塑粘性土、中密砂土</option>
																	<option value="3">坚硬粘性土、密实砂土、强风化岩</option>
																	<option value="4">风化岩、岩石</option>
															</select></td>
														</tr>
														<tr>
															<td>龙骨下最小富裕深度Z1(m)</td>
															<td><select class="form-control" id="depz1"
																name="depz1">
																	<option value="0.20">0.20</option>
																	<option value="0.30">0.30</option>
																	<option value="0.40">0.40</option>
																	<option value="0.50" selected="selected">0.50</option>
																	<option value="0.60">0.60</option>
																	<option value="0.80">0.80</option>
															</select></td>
														</tr>
														<tr>
															<td>船、浪夹角（度）</td>
															<td><input type="number" id="bangle" name="bangle"
																required="required" value="45"></input></td>
														</tr>
														<tr>
															<td>波浪富裕深度Z2(m)</td>
															<td><input type="number" id="depz2" name="depz2"
																required="required" value="0.675"></input></td>
														</tr>
														<tr>
															<td>船舶装载纵倾富裕深度Z3(m)</td>
															<td><select class="form-control" id="depz3"
																name="depz3">
																	<option value="0">0</option>
																	<option value="0.15" selected="selected">0.15</option>
															</select></td>
														</tr>
														<tr>
															<td>备淤深度Z4(m)</td>
															<td><input type="number" id="depz4" name="depz4"
																required="required" value="0.4"></input></td>
														</tr>
														<tr>
															<td rowspan="3">航道设计基本尺度</td>
															<td>航道有效宽度W(m)</td>
															<td><input type="number" id="widw" name="widw"
																required="required" value="210.2"></input></td>
														</tr>
														<tr>
															<td>通航水深D0(m)</td>
															<td><input type="number" id="dep0" name="dep0"
																required="required" value="16.365"></input></td>
														</tr>
														<tr>
															<td>设计水深D(m)</td>
															<td><input type="number" id="dep" name="dep"
																required="required" value="16.8"></input></td>
														</tr>
													</TBODY>
												</TABLE>
											</DIV>
										</DIV>
										<!-- <div align="center"><button type="button" onClick="next()" class="btn btn-success">下一步</button></div> -->
									</DIV>
								</DIV>
								<SCRIPT th:inline="javascript">
				function next()
				{
				    checkPort();			
					 if($("#heiz0").val()=="")
						{
						showTip("船舶航行下沉量不能为空","danger");
						$("#heiz0").focus();
						return false;
						} 
					 if($("#bangle").val()=="")
						{
						showTip("船、浪夹角（度）不能为空","danger");
						$("#bangle").focus();
						return false;
						} 
					 if($("#depz2").val()=="")
						{
						showTip("波浪富裕深度Z2不能为空","danger");
						$("#depz2").focus();
						return false;
						} 
					 if($("#depz4").val()=="")
						{
						 showTip("备淤深度Z4不能为空","danger");
						$("#depz4").focus();
						return false;
						} 
					 if($("#widw").val()=="")
						{
						 showTip("航道有效宽度W不能为空","danger");
						$("#widw").focus();
						return false;
						} 
					 if($("#dep0").val()=="")
						{
						 showTip("通航水深D0不能为空","danger");
						$("#dep0").focus();
						return false;
						} 
					 if($("#dep").val()=="")
						{
						 showTip("设计水深D不能为空","danger");
						$("#dep").focus();
						return false;
						} 				    
				    
				}

			    </SCRIPT>
							</form>
						</DIV>

					</DIV>

				</DIV>
				<!-- 第6个Tab -->
				<DIV class="tab-pane " id="tab6" role="tabpanel">
					<div id="next2">
						<form class="form-inline" method="post" id="myform">
							<DIV class="ActiveTab-wrapper">
								<DIV class="row">
									<DIV class="col-md-12">
										<DIV class="dataTables_wrapper&#10;">
											<div>
												<h3>
													船舶航速v: <select class="form-control" id="v" name="v">
														<option>6</option>
														<option selected="selected">8</option>
														<option>10</option>
														<option>12</option>
													</select> &nbsp;&nbsp;&nbsp;&nbsp;每潮次通航持续时间ts: <input type="number"
														style="width: 50px" required="required" id="ts" name="ts"
														value="7"></input>h &nbsp;&nbsp;&nbsp;&nbsp;疏浚设备:4500m<sup>3</sup>自航耙吸式挖泥船;每边计算超宽:
													<input type="number" style="width: 50px"
														required="required" name="width" id="width" value="9"></input>m;超深:
													<input type="number" style="width: 50px"
														required="required" name="height" id="height" value="0.7"></input>m
												</h3>
											</div>
											<div>
												<iframe width="1000" height="650" allow="fullscreen"
													src="https://cloud.anylogic.com/assets/embed?modelId=58055e80-2c73-432f-8e47-07f1c7a7389b"></iframe>
											</div>
											<DIV class="row">
												<div class="col-md-12">
													<div style="overflow: auto;">
														<div style="float: left; width: 40%">
															<span style="font-size: 18px;">仿真方案列表</span>
														</div>
														<!-- <div style="float:right;width:20%"> <button onClick="javascript:checkAndCom();return false;" class="btn btn-success">仿真实验</button></div> -->
													</div>
													<div style="float: right; width: 20%; display: none"
														id="results">
														<a href="getResults" class="btn btn-danger"
															target="_blank">查看结果</a>
													</div>
													<div>
														<button data-toggle="modal" data-target="#myModal"
															class="btn btn-success" type="button">保存结果</button>
													</div>
													<!--  绘制表格 -->
													<TABLE class="table dataTable" id="tab61_table">
														<THEAD>
															<TR>
																<TH width="10%">序号</TH>
																<TH>通航保证率(%)</TH>
																<TH>航道通航水位(m)</TH>
																<TH>疏浚挖槽长度(m)</TH>
																<TH>船舶总等待时间(h)</TH>
																<TH>船舶等待成本(万元)</TH>
																<TH>挖泥量(万方)</TH>
																<TH>挖泥费(万元)</TH>
															</TR>
														</THEAD>
														<TBODY id="tbody61">
															<tr>
																<td>1</td>
																<td><input type="number" required="required"
																	value="60"></input></td>
																<td><input type="number" required="required"
																	value="1.15"></input></td>
																<td><input type="number" required="required"
																	value="7320"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
															<tr>
																<td>2</td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
															<tr>
																<td>3</td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
															<tr>
																<td>4</td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
															<tr>
																<td>5</td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
															<tr>
																<td>6</td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
															<tr>
																<td>7</td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
															<tr>
																<td>8</td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
															<tr>
																<td>9</td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
															<tr>
																<td>10</td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
																<td><input type="number"></input></td>
															</tr>
														</TBODY>
													</TABLE>

												</div>
												<!-- <div class="col-md-7" >		
							<div style="overflow:auto;">
 								<div style="float:left;width:40%"> <span style="font-size:18px;">仿真实验结果</span> </div>
 								
							</div>
							</div>				
							 绘制表格
 							<TABLE class="table dataTable" id="tab62_table">
										<THEAD>
											<TR>
												<TH>序号</TH>
											
											</TR>
										</THEAD>
										<TBODY id="tbody62">
											<tr><td>1</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
											<tr><td>2</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
											<tr><td>3</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
											<tr><td>4</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
											<tr><td>5</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
											<tr><td>6</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
											<tr><td>7</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
											<tr><td>8</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
											<tr><td>9</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
											<tr><td>10</td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											<td><input type="number"></input></td>
											</tr>
										</TBODY>
									</TABLE>
						</div> -->
											</DIV>
										</DIV>
									</DIV>
								</DIV>
							</DIV>
							<SCRIPT th:inline="javascript">
				function checkAndCom()
				{					
					var sdata={};
					var port_id=$("#port_id").find("option:selected").val();
					if(port_id=='0')
					 {
					 showTip("请选择港口规模","danger");
					 return;
					 }
					sdata.port_id=port_id;  //获取portid
					sdata.issdec=$("#issdec").val();
					sdata.multi=$("#multi").val();
					sdata.wangle=$("#wangle").val();
					sdata.widc=$("#widc").val();
					sdata.heiz0=$("#heiz0").val();
					sdata.soil=$("#soil").val();
					sdata.depz1=$("#depz1").val();
					sdata.bangle=$("#bangle").val();
					sdata.depz2=$("#depz2").val();
					sdata.depz3=$("#depz3").val();
					sdata.depz4=$("#depz4").val();
					sdata.widw=$("#widw").val();
					sdata.dep0=$("#dep0").val();
					sdata.dep=$("#dep").val();
					if(widw==null||sdata.dep0==""||sdata.dep=="")
						{
						showTip("海港主尺度有没有填写的内容！","danger");
						return;
						}
						
					sdata.v=$("#v").val();
					sdata.ts=$("#ts").val();
					sdata.width=$("#width").val();
					sdata.height=$("#height").val();
					
					if(sdata.width==""||sdata.height==""||sdata.ts=="")
					{
					showTip("仿真方案中有没有填写的内容！","danger");
					return;
					}
					sdata.list=[];
				
					var trList = $("#tbody61").children("tr");  
					 /* <![CDATA[ */
				    for (var i=0;i<trList.length;i++) {  
				    	var map={};
				        var tdArr = trList.eq(i).find("td");  
				        map.assrate= tdArr.eq(1).find("input").val();//通航保证率
				        map.waterlevel = tdArr.eq(2).find("input").val();//航道通航水位 
				        map.length = tdArr.eq(3).find("input").val();//疏浚挖槽长度
				        sdata.list.push(map);
				    } 
				    /* ]]> */
				    
				    	

					$.ajax({
						type : "POST",
						url :  "doSimulation.json",
						data :  JSON.stringify(sdata),
						contentType : "application/json",
						dataType : "json",
						 beforeSend: function () {
							 	showLoading();
							   },
			            success:function(data) {
			            	$("#tab62_table tbody").html("");			            				            	
			            	if(data.list62==null)
			            	 	showTip(data.msg,"danger");
			            	else
			            		{
			            		showTip(data.msg,"success");
			            		 /* <![CDATA[ */
			            		    for(var i=0;i<data.list62.length;i++)
			            		    	{
			            		    	var temp=data.list62[i].replace(";",":");
			            		    	temp=temp.substring(0,temp.length-1);//去掉最后一位
			            		    	var temps=temp.split(":");	
			            		    	var str='<tr><td>'+(i+1)+'</td>';
			            		    	for(var j=0;j<temps.length;j++)
			            		    		{	
			            		    		str+='<td>'+temps[j]+'</td>';
			            		    		}	
			            		    	str+="</tr>";
			            		    	$("#tab62_table tbody").append(str);
			            		    	}			            		    	
			            		    /* ]]> */
			            		    /* <![CDATA[ */
			            		    for(var i=data.list62.length;i<10;i++)
			            		    	$("#tab62_table tbody").append('<tr><td>'+(i+1)+'</td><td><input type="number"></td><td><input type="number"></input></td><td><input type="number"></input></td><td><input type="number"></input></td></tr>');
			            		    /* ]]> */
			            		}
			               
						},
						complete: function () {
						    hideLoading();
						   }
					});

				}
				
				function save()
				{
					var sno=$("#sno").val();
					var sname=$("#sname").val();
					if(sno==""||sname=="")
						{
						showTip("请输入学号和姓名信息！","warning");
						return;
						}
					var rdata={};
					rdata.sno=sno;
					rdata.sname=sname;
					rdata.list=[];
					
					var trList = $("#tbody61").children("tr");  
					 /* <![CDATA[ */
				    for (var i=0;i<trList.length;i++) {  
				    	var map={};
				        var tdArr = trList.eq(i).find("td");  
				       /*  map.waittime= tdArr.eq(1).find("input").val();//船舶总等待时间*/
				        
				       
				       map.width=$("#width").val();
				       map.height=$("#height").val();
				       map.issdec=$("#issdec").val();
				       map.multi=$("#multi").val();
				       map.wangle=$("#wangle").val();
				       map.widc=$("#widc").val();
				       map.heiz0=$("#heiz0").val();
				       map.soil=$("#soil").val();
				       map.depz1=$("#depz1").val();
				       map.bangle=$("#bangle").val();
				       map.depz2=$("#depz2").val();
				       map.depz3=$("#depz3").val();
				       map.depz4=$("#depz4").val();
				       map.widw=$("#widw").val();
				       map.dep0=$("#dep0").val();
				       map.dep=$("#dep").val();
				       map.v=$("#v").val();
				       map.ts=$("#ts").val();
				       map.assrate=trList.eq(i).find("td").eq(1).find("input").val();
				       map.waterlevel=trList.eq(i).find("td").eq(2).find("input").val();
				       map.length=trList.eq(i).find("td").eq(3).find("input").val();
				       map.waittime=trList.eq(i).find("td").eq(4).find("input").val();//船舶总等待时间
				       map.waitcost = trList.eq(i).find("td").eq(5).find("input").val();//船舶等待成本
				        map.soilquantity = trList.eq(i).find("td").eq(6).find("input").val();//挖泥量
				        map.soilcost = trList.eq(i).find("td").eq(7).find("input").val();//挖泥费 
				       map.portid=$("#port_id").find("option:selected").val();
				     //   console.log(map);
				       rdata.list.push(map);
				    } 
				    /* ]]> */
					$.ajax({
						type : "POST",
						url :  "saveResult.json",
						data :  JSON.stringify(rdata),
						contentType : "application/json",
						dataType : "json",
			            success:function(data) {
			            	if(data.res==1){
			            		showTip(data.msg,"success");	
			            		$("#results").show();//显示查看所有结果的按钮
			            	}
			            		
			            	else
			            		showTip(data.msg,"danger");
						}
					});
				}
				
			    </SCRIPT>
						</form>
					</div>

				</DIV>
				<!--  第七个tab  -->
				<div class="tab-pane " id="tab7" role="tabpanel">
					<a href="/downFile">下载模板</a>
					<div class="col-md-12">
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane pt20 pb20 fade in active"
								id="demo-default">
								<div class="filediv">
									<div class="col-md-6">
										<br /> <br />
										<form action="/load" method="post"
											enctype="multipart/form-data" class="text-center">
											<input type="file" name="file" id="demo-fileInput-4"
												multiple="multiple" /> <input type="submit"
												class="btn btn-info" value="提交" />
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</DIV>
		</DIV>
	</DIV>
	<!-- 模态框开始 -->
	<div class="modal fade" id="myModal" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true"
		style="background-color: transparent; width: 100%; max-height: 100%;">
		<div class="modal-dialog">
			<div class="modal-content" style="width: 100%; height: 100%">

				<!--    模态框头部 -->
				<div class="modal-header">
					<h2 class="modal-title">输入个人信息</h2>
				</div>

				<!--  模态框主体 -->
				<div class="modal-body">
					<input type="text" name="sno" id="sno" class="form-control"
						placeholder="请输入学号"></input> <input type="text" name="sname"
						id="sname" class="form-control" placeholder="请输入姓名"></input>
				</div>

				<!-- 模态框底部 -->
				<div class="modal-footer">
					<button type="button" class="btn btn-success" data-dismiss="modal"
						onClick="javascript:save()">提交</button>
					<button type="button" class="btn btn-warning" data-dismiss="modal">关闭</button>
				</div>

			</div>
		</div>
	</div>
</body>

<!-- 模态框结束 -->
